<template>

	<Layout class="bg-white p-2 position-relative">
		<Row class="p-1">
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input class="w-100" v-model="param.modelNumber" placeholder="输入门禁型号" />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input class="w-100" v-model="param.uId" placeholder="输入设备id" />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input class="w-100" v-model="param.sn" placeholder="输入序列号" />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input class="w-100" v-model="param.uKey" placeholder="输入授权key" />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Select class="w-100" clearable v-model="param.storeId" placeholder="请选择门店">
				<Option class="w-100" v-for="item in stores" :key="item.storeId" :value="item.storeId">{{ item.name }}</Option>
			</Select>
			</Col>
		</Row>
		<Row class="m-1">
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<radio-group v-model="param.statu" >
				<label
					class="ivu-radio-wrapper ivu-radio-group-item ivu-radio-wrapper-checked ivu-radio-default">状态：</label>
				<Radio label="" @click.native.prevent="changeDataStatu('')">全部</Radio>
				<Radio label="1" @click.native.prevent="changeDataStatu('1')">启用</Radio>
				<Radio label="0" @click.native.prevent="changeDataStatu('0')">禁用</Radio>
			</radio-group>
			</Col>
			<Col class="p-1" span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<radio-group v-model="param.ioFlg">
				<label
					class="ivu-radio-wrapper ivu-radio-group-item ivu-radio-wrapper-checked ivu-radio-default">出/入：</label>
				<Radio label="" @click.native.prevent="changeDataIoFlg('')">全部</Radio>
				<Radio label="1" @click.native.prevent="changeDataIoFlg('1')">入口</Radio>
				<Radio label="0" @click.native.prevent="changeDataIoFlg('0')">出口</Radio>
			</radio-group>
			</Col>
			<Button class="float-right" type="primary" shape="circle" @click="inquire()" icon="ios-search">查询</Button>
		</Row>

		<Layout class="bg-white">
			<Table border class="m-2" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="statu">
					<span v-if="row.statu === true">启用</span>
					<span v-else-if="row.statu === false">禁用</span>
				</template>
				<template slot-scope="{ row, index }" slot="ioFlg">
					<span v-if="row.ioFlg === true">入口</span>
					<span v-else-if="row.ioFlg === false">出口</span>
				</template>
				
			</Table>
			<Page class="m-2 text-right" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>



</template>

<script>
	export default {
		data() {
			return {
				param: {
					statu: "",
					ioFlg: "",
				},
				stores: [],
				tableInfo: {
					pageSize: 10, //每页条数
					currentPage: 1, //当前页码
					total: 0, //总数
					columnInfo: [{
							title: "编号",
							key: "accessId",
						},
						{
							title: "门店名称",
							key: "name",
						},
						{
							title: "型号",
							key: "modelNumber",
						},
						{
							title: "设备ID",
							key: "uid",
						},
						{
							title: "授权key",
							key: "ukey",
						},
						{
							title: "序列号",
							key: "sn",
						},
						{
							title: "状态",
							slot: "statu",
						},
						{
							title: "出/入",
							slot: "ioFlg",
						},
					],
					data: []
				},
				tableData: {
					accessId: "",
					name: "",
					modelNumber: "",
					uid: "",
					ukey: "",
					sn: "",
					statu: "",
					ioFlg: ""
				}
			}
		},
		methods: {
			toNewAccess: function() {
				this.$router.push({
					name: "access_new",
				});
			},
			changeDataStatu(nowValue) {
				nowValue === this.param.statu ? this.param.statu = "" : this.param.statu = nowValue;
			},
			changeDataIoFlg(nowValue) {
				nowValue === this.param.ioFlg ? this.param.ioFlg = "" : this.param.ioFlg = nowValue;
			},
			getAccessPage: function() {
				this.tableInfo.data = [];
				this.param.current = this.tableInfo.currentPage;
				this.param.size = this.tableInfo.pageSize;
				this.http.get({
					url: "/store/access/page",
					param: {
						param: this.param
					}
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.getAccessPage();
			},
			inquire: function() {
				this.tableInfo.currentPage = 1;
				this.getAccessPage();
			},
			
			getStores: function() {
				return this.http.get({
					url: "/store/store/info",
					param: {}
				}).then(data => {
					this.stores = data;
				});
			},
		},
		created: function() {
			this.getStores().then(() => {
				this.getAccessPage();
			});
		}
	}
</script>

<style scoped>
	.ivu-radio-group {
		height: 2rem;
		line-height: 2rem;
	}
</style>
